<template>
  <div class="sign">
    <template
      v-if="!UserSignInfo || !SignAward || !UserSignRecord"
    >
      <div class="loading">
        <svg
          t="1616053408617"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="17643"
          width="64"
          height="64"
        >
          <path
            d="M739.487 798.497v-78.751c0-86.667-49.501-164.599-124.671-202.725 75.171-38.137 124.671-116.076 124.671-202.735v-78.747c34.78-1.811 62.499-30.658 62.499-65.863 0-36.359-29.582-65.941-65.972-65.941H287.953c-36.358 0-65.941 29.581-65.941 65.941 0 35.217 27.738 64.072 62.505 65.866v78.743c0 86.661 49.495 164.592 124.666 202.735-75.171 38.127-124.666 116.059-124.666 202.726v78.748c-34.768 1.793-62.505 30.646-62.505 65.868 0 36.368 29.582 65.95 65.941 65.95h448.061c36.39 0 65.972-29.581 65.972-65.95 0-35.21-27.719-64.054-62.499-65.865zM256.513 169.678c0-17.337 14.117-31.44 31.44-31.44h448.061c17.353 0 31.472 14.102 31.472 31.44 0 17.332-14.119 31.45-31.472 31.45H287.953c-17.322-0.001-31.44-14.118-31.44-31.45z m62.504 550.068c0-86.86 58.626-163.385 142.559-186.056a17.26 17.26 0 0 0 12.734-16.661c0-7.785-5.22-14.626-12.734-16.646-83.933-22.709-142.559-99.227-142.559-186.094v-78.655H704.98v78.655c0 86.867-58.626 163.385-142.559 186.094-7.515 2.021-12.735 8.862-12.735 16.646a17.262 17.262 0 0 0 12.735 16.661c83.933 22.673 142.559 99.196 142.559 186.056v78.659H670c-8.233-28.4-34.42-49.172-65.478-49.172h-75.286V474.897c80.982-8.637 144.278-77.368 144.278-160.603v-17.381H350.466v17.381c0 83.232 63.29 151.961 144.262 160.602v274.337H419.45c-31.053 0-57.241 20.771-65.473 49.172h-34.964v-78.659z m416.998 176.066H287.954c-17.322 0-31.44-14.117-31.44-31.455 0-17.332 14.117-31.45 31.44-31.45h448.061c17.353 0 31.472 14.119 31.472 31.45 0 17.337-14.119 31.455-31.472 31.455z"
            p-id="17644"
            fill="#1296db"
          ></path>
        </svg>
        <span class="loading_text">加载中...</span>
      </div>
    </template>
    <template v-else>
      <div class="sign_userinfo" v-if="UserSignInfo">
        <div class="userinfo_user">
          <van-image :src="UserSignInfo.avatar" fit="cover" />
          <div class="User_data">
            <p>{{ UserSignInfo.nickname }}</p>
            <span>积分: {{ UserSignInfo.integral.split(".")[0] }}</span>
          </div>
        </div>
        <div class="detailList" @click="ToRecord">
          <van-icon name="bars" size="0.3rem" />
          明细
        </div>
      </div>
      <div class="sign_condition" v-if="UserSignInfo">
        <div class="condition_date" v-if="SignAward">
          <ul>
            <li v-for="(item, index) in SignAward" :key="item.id">
              <span>{{ item.day }}</span>
              <van-image
                :src="
                  index == SignAward.length - 1
                    ? UserSignInfo.sign_num > index
                      ? ''
                      : ''
                    : UserSignInfo.sign_num > index
                    ? ''
                    : ''
                "
                fit="cover"
              />
              <span
                :style="
                  'color:' +
                  (UserSignInfo.sign_num > index ? '#ff9052' : '#99a6c4')
                "
                >+{{ item.sign_num }}</span
              >
            </li>
          </ul>
          <div class="btn" @click="Immedsign" v-if="!SignFlag">立即签到</div>
          <div class="btn SignedIn" @click="signedIn" v-else>已签到</div>
          <div class="lock"></div>
        </div>
        <div class="condition_record">
          <p class="record_title">已累计签到</p>
          <ul class="record_day">
            <li>{{ SumSignDay[0] }}</li>
            <li>{{ SumSignDay[1] }}</li>
            <li>{{ SumSignDay[2] }}</li>
            <li>{{ SumSignDay[3] }}</li>
            <li>天</li>
          </ul>
          <p class="encourage">
            据说连续签到第七天可获得超额积分，一定要坚持签到哦~~~
          </p>
          <template v-if="UserSignRecord && UserSignRecord.length != 0">
            <ul class="condition_recordlist">
              <li
                v-for="(item, index) in UserSignRecord.slice(0, 6)"
                :key="index"
              >
                <div class="time">
                  <span class="time_title">{{ item.title }}</span>
                  <span class="time_day">{{ item.add_time }}</span>
                </div>
                <span class="integral">+{{ item.number }}</span>
              </li>
            </ul>
            <p class="more" @click="ToRecord">
              点击加载更多
              <van-icon name="arrow" size="0.3rem" />
            </p>
          </template>
        </div>
      </div>
      <van-overlay :show="overlayShow" @mousewheel.prevent>
        <div class="wrapper" @click.stop>
          <div class="content">
            <div class="aureole"></div>
            <div class="tips">
              <div>
                <p>签到成功</p>
                <span>{{ SignReturn }}</span>
                <span @click="overlayShow = false">好的</span>
              </div>
            </div>
          </div>
        </div>
      </van-overlay>
    </template>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      UserSignInfo: null,
      UserSignRecord: null,
      SignAward: null,
      SignFlag: false,
      overlayShow: false,
      SignReturn: null,
    };
  },
  computed: {
    ...mapState({
      userinfo: (state) => state.data.userInfo,
    }),
    GetData() {
      var result = this.UserSignInfo && this.UserSignRecord && this.SignAward;
      return result;
    },
    SumSignDay() {
      var result = "";
      if (this.UserSignInfo.sum_sgin_day) {
        result = this.UserSignInfo.sum_sgin_day.toString().padStart(4, 0);
      } else {
        result = "0000";
      }
      return result.split("");
    },
  },
  methods: {
    ToRecord() {
      this.$router.push("/user/sign_record");
    },
    Immedsign() {
      this.axios.post("/api/sign/integral").then((response) => {
        if (response.status == 200) {
          this.SignReturn = response.msg;
          this.SignFlag = true;
          this.overlayShow = true;
          this.axios
            .post("/api/sign/user", {
              sign: this.userinfo.sign_num + 1,
            })
            .then((response) => {
              this.UserSignInfo = response.data.data;
            });
          this.axios.get("/api/sign/list?page=1&limit=20").then((response) => {
            this.UserSignRecord = response.data.data;
          });
        } else {
          console.log(1);
        }
      });
    },
    signedIn() {
      this.$toast("今天您已签到！");
    },
  },
  created() {
    this.axios
      .post("/api/sign/user", {
        sign: this.userinfo.sign_num,
      })
      .then((response) => {
        this.UserSignInfo = response.data.data;
      });
    this.axios.get("/api/sign/config").then((response) => {
      this.SignAward = response.data.data;
    });
    this.axios.get("/api/sign/list?page=1&limit=20").then((response) => {
      this.UserSignRecord = response.data.data;
    });
  },
  watch: {
    UserSignRecord(n) {
      if (n.length == 0) return;
      var date = new Date();
      var y = date.getFullYear();
      var m = (date.getMonth() + 1).toString().padStart(2, 0);
      var d = date.getDate().toString().padStart(2, 0);
      var result = y + "-" + m + "-" + d;
      if (result == n[0].add_time) {
        this.SignFlag = true;
      } else {
        this.SignFlag = false;
      }
    },
  },
};
</script>

<style lang="less">
.sign {
  width: 100%;
  .loading {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .loading_text {
      color: #272822;
    }
    @keyframes move {
      0% {
        transform: rotateZ(0deg);
      }

      15% {
        transform: rotateZ(180deg);
      }

      55% {
        transform: rotateZ(180deg);
      }

      70% {
        transform: rotateZ(360deg);
      }

      100% {
        transform: rotateZ(360deg);
      }
    }

    .icon {
      animation: move 4s linear 2s infinite;
    }
  }
  .sign_userinfo {
    width: 100%;
    height: 150px;
    background-color: #e93323;
    padding: 0 10px;
    padding-top: 40px;
    position: relative;
    .userinfo_user {
      display: flex;
      .van-image {
        width: 41px;
        height: 41px;
        border-radius: 50%;
        overflow: hidden;
        border: 1px solid white;
      }
      .User_data {
        margin-left: 15px;
        color: white;
        p {
          font-weight: bold;
          margin-bottom: 8px;
        }
        span {
          color: white;
          padding: 4px 8px;
          border-radius: 2px;
          background-color: #ff9000;
          font-size: 12px;
        }
      }
    }
    .detailList {
      position: absolute;
      right: 0;
      top: 40px;
      font-size: 14px;
      color: #ff9000;
      background-color: #fff;
      width: 70px;
      height: 33px;
      border-radius: 20px 0 0 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      .van-icon-bars {
        margin-right: 3px;
      }
    }
  }
  .sign_condition {
    width: 100%;
    padding: 0 10px;
    transform: translateY(-40px);
    .condition_date {
      width: 100%;
      background-color: #fff;
      border-radius: 8px;
      padding: 25px 15px;
      position: relative;
      ul {
        display: flex;
        justify-content: space-between;
        > li {
          display: flex;
          align-items: center;
          flex-direction: column;
          font-size: 12px;
          span {
            color: #8a8886;
            &:nth-child(3) {
              font-size: 14px;
            }
          }
          .van-image {
            width: 28px;
            height: 28px;
            margin: 8px 0;
          }
          &:last-child {
            .van-image {
              width: 37.5px;
            }
            span {
              &:nth-child(1) {
                background-color: #f4b409;
                padding: 1px 5px;
                border-radius: 8px;
              }
            }
          }
        }
      }
      .btn {
        width: 200px;
        height: 38px;
        line-height: 38px;
        text-align: center;
        border-radius: 20px;
        background-color: #e93323;
        color: white;
        margin: 20px auto;
        margin-bottom: 10px;
      }
      .SignedIn {
        background-color: #999999;
      }
      .lock {
        position: absolute;
        width: 279px;
        height: 34px;
        background-image: url();
        background-repeat: no-repeat;
        background-size: 100% 100%;
        left: 50%;
        transform: translateX(-50%);
        bottom: -20px;
      }
    }
    .condition_record {
      margin-top: 8px;
      width: 100%;
      background-color: #fff;
      border-radius: 8px;
      padding: 25px 15px;
      display: flex;
      flex-direction: column;
      align-items: center;
      .record_title {
        text-align: center;
        color: #666666;
        margin-top: 10px;
      }
      .record_day {
        margin: 20px auto;
        display: flex;
        > li {
          margin-right: 10px;
          &:nth-child(-n + 4) {
            width: 40px;
            height: 58px;
            background-color: #e93323;
            border-radius: 4px;
            color: white;
            font-size: 48px;
            text-align: center;
            line-height: 58px;
            position: relative;
            &::after {
              content: "";
              position: absolute;
              left: 0;
              top: 50%;
              transform: translateY(-50%);
              display: block;
              width: 100%;
              height: 2px;
              background-color: rgba(255, 255, 255, 0.3);
            }
          }
          &:last-child {
            display: flex;
            align-items: flex-end;
          }
        }
      }
      .encourage {
        color: #999999;
        font-size: 15px;
        text-align: center;
        padding: 0 15px;
      }
      .condition_recordlist {
        width: 100%;
        margin-top: 20px;
        > li {
          width: 100%;
          height: 65px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-top: 1px solid #f0f0f0;
          &:last-child {
            border-bottom: 1px solid #f0f0f0;
          }
          .time {
            display: flex;
            flex-direction: column;
            .time_day {
              margin-top: 5px;
              font-size: 12px;
              color: #cabbbb;
            }
          }
          .integral {
            color: #fc4141;
          }
        }
      }
      .more {
        font-size: 14px;
        margin-top: 15px;
        .van-icon-arrow {
          vertical-align: -2px;
        }
      }
    }
  }
  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    .content {
      width: 322px;
      height: 322px;
      position: relative;
      .aureole {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-image: url(http://47.115.51.185/h5/img/light.90f47a4d.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        animation: rotate 2s linear infinite;
      }
      @keyframes rotate {
        100% {
          transform: rotateZ(360deg);
        }
      }
      .tips {
        width: 210px;
        height: 210px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-image: url(http://47.115.51.185/h5/img/register.b978b022.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        > div {
          text-align: center;
          padding-top: 50px;
          p {
            color: white;
            font-size: 18px;
            margin-bottom: 8px;
          }
          span {
            &:nth-of-type(1) {
              color: #f7b4ad;
            }
            &:nth-of-type(2) {
              color: red;
              display: block;
              border-radius: 20px;
              padding: 10px 40px;
              background-color: #f8d168;
              margin-top: 20px;
            }
          }
        }
      }
    }
  }
}
</style>